<template>
  <div class="contain">
    <div class="top">
      <div class="left">
        <img :src="userInfo.avatarUrl" class="image">
      </div>
      <div class="right">
        <div class="right_up">
          <label>积分：{{score}}</label>
        </div>
        <div class="right_down">
          <label></label>
        </div>
      </div>
      <div class="center">
        <div class="center_up">
          <label>用户名：{{userInfo.nickName}}</label>
        </div>
      </div>
    </div>
    <div class="down">
      <div v-for="i in myNumsOfRound" class="flex-item">
        <button class="btn" @click="toRound(i)">
          {{i+1}}
        </button>
      </div>
      <div v-for="i in numsOfRound" class="flex-item" v-if="i>myNumsOfRound-1">
        <button class="nopass" @click="toRound(i)">
          {{i+1}}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        numsOfRound: 3, // 这一关的关卡数
        myNumsOfRound: 3, // 用户的闯关数
        userInfo: [],
        score: 2
      }
    },
    onShow () {
      // 获得用户最新的积分数据
      this.$fly.get(this.$store.state.URL + '/studygo/getUserByUsername', {username: this.$store.state.openid})
        .then((response) => {
          this.$store.state.score = response.data.data.score
          this.score = this.$store.state.score
        })
        .catch((error) => {
          console.log(error)
        })
    },
    beforeMount () {
      this.score = this.$store.state.score
      this.userInfo = wx.getStorageSync('userInfo')
      this.getMyNumsOfRound()
      this.getNumsOfRound()
    },
    methods: {
      toRound (i) {
        // 进入闯关
        if (i <= this.myNumsOfRound) {
          this.$store.state.roundSelectNum = i
          // 获得选择关卡的信息
          this.$fly.get(this.$store.state.URL + '/studygo/gateway/getGate', {
            subject: this.$store.state.userSubject,
            grade: this.$store.state.userGrade,
            number: i.toString()
          })
            .then((response) => {
              this.$store.state.roundSelectedDate = response.data.data
            })
            .catch((error) => {
              console.log(error)
            })
          wx.redirectTo({
            url: '/pages/answer/main'
          })
        }
      },
      getNumsOfRound () {
        this.$fly.get(this.$store.state.URL + '/studygo/gateway/getNumberOfGatewway', {
          subject: this.$store.state.userSubject,
          grade: this.$store.state.userGrade
        })
          .then((response) => {
            this.numsOfRound = response.data.data
          })
          .catch((error) => {
            console.log(error)
          })
      },
      getMyNumsOfRound () {
        this.$fly.get(this.$store.state.URL + '/studygo/gateway/getGateways', {
          subject: this.$store.state.userSubject,
          grade: this.$store.state.userGrade,
          username: this.$store.state.openid
        })
          .then((response) => {
            this.myNumsOfRound = response.data.data.length
            this.$store.state.myNumsOfRound = this.myNumsOfRound
          })
          .catch((error) => {
            console.log(error)
          })
      }
    }
  }
</script>

<style>
  page {
    background-image: url();
  }

  .flex-item {
    flex-wrap: wrap;
    vertical-align: top;
    flex: 0 0 25%;
    text-align: center;
    display: inline-block;

  }

  .btn {
    margin: 20rpx;
    background: aquamarine;
    height: 60px;
    width: 60px;
    border-radius: 30px 30px 30px 30px;
    margin-left: 10%;
  }
  .nopass{
    margin: 20rpx;
    background: lightpink;
    height: 60px;
    width: 60px;
    border-radius: 30px 30px 30px 30px;
    margin-left: 10%;
  }

  .top {
    height: 100px;
    float: top;
    position: relative;
  }

  .down {
    padding-bottom: 50px;
    float: bottom;
    position: relative;
    margin-top: 30%;
  }

  .left {
    float: left;
    position: relative;

  }

  .center {
    margin-left: 30%;
    margin-right: 40%;
    height: 100px;
    align-items: center;
    position: relative;
  }

  .right {
    float: right;
    position: relative;
  }

  .center_up {
    height: 50px;
    font-size: 18px;
    font-family: "华文楷体";
    font-weight: bolder;
    float: top;
    position: relative;
  }

  .center_down {
    height: 50px;
    font-size: 16px;
    float: bottom;
    position: relative;

  }

  .right_up {
    height: 50px;
    font-size: 18px;
    font-family: "华文楷体";
    font-weight: bolder;
    float: top;
    margin-right: 20px;
  }

  .right_down {
    height: 50px;
    font-size: 16px;
    float: bottom;
    position: relative;

  }

  .image {
    height: 90px;
    width: 90px;
  }
</style>
